<!--<template>-->
<!--  <van-nav-bar-->
<!--      :title="title"-->
<!--      right-text="按钮"-->
<!--      left-arrow-->
<!--      @click-left="onClickLeft"-->
<!--      @click-right="onClickRight"-->
<!--      style="margin: 5px"-->
<!--  >-->
<!--    <template #right>-->
<!--      <van-icon name="search" size="18"/>-->
<!--    </template>-->
<!--    </van-nav-bar>-->
<!--  <div id="content">-->
<!--    <router-view></router-view>-->
<!--  </div>-->
<!--  <van-tabbar route @change="onChange">-->
<!--    <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>-->
<!--    <van-tabbar-item to="/team" icon="search" name="team">队伍</van-tabbar-item>-->
<!--    <van-tabbar-item to="/message" icon="chat-o" name="message">消息</van-tabbar-item>-->
<!--    <van-tabbar-item to="/user" icon="friends-o" name="user">个人</van-tabbar-item>-->
<!--  </van-tabbar>-->

<!--</template>-->
<!--<script setup lang="ts">-->
<!--import { Toast } from "vant";-->
<!--import { useRouter,useRoute } from "vue-router";-->
<!--import {ref} from "vue";-->
<!--import routes from "../config/route";-->

<!--const route=useRoute();-->
<!--const router=useRouter();-->
<!--const DEFAULT_TITLE='伙伴匹配';-->
<!--const title=ref(DEFAULT_TITLE);-->

<!--router.beforeEach((to,from)=>{-->
<!--  const toPath=to.path;-->
<!--  const route=routes.find((route)=>{-->
<!--    return toPath==route.path;-->
<!--  })-->
<!--  title.value = route?.title ?? DEFAULT_TITLE;-->
<!--})-->

<!--const onClickLeft = ()=>{-->
<!--  router.back();-->
<!--};-->
<!--const onClickRight = () =>{-->
<!--  router.push('/search')-->
<!--};-->
<!--//const active = ref("index");-->
<!--const onChange = (index) => Toast("标签"+index);-->
<!--</script>-->
<!--<style scoped>-->
<!--  #content{-->
<!--    padding-bottom: 50px;-->
<!--  }-->
<!--</style>-->






<!--<template>-->
<!--  <van-sticky>-->
<!--    <van-nav-bar-->
<!--        :title="title"-->
<!--        left-arrow-->
<!--        @click-left="onClickLeft"-->
<!--        @click-right="onClickRight"-->
<!--        style="margin: 5px"-->
<!--    >-->
<!--      <template #right>-->
<!--        <van-icon name="search" size="18"/>-->
<!--      </template>-->
<!--    </van-nav-bar>-->
<!--  </van-sticky>-->
<!--  <div class="content">-->
<!--    <router-view/>-->
<!--  </div>-->
<!--  <van-tabbar route v-model="active">-->
<!--    <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>-->
<!--    <van-tabbar-item to="/team" icon="flag-o" name="team">队伍</van-tabbar-item>-->
<!--    <van-tabbar-item replace class="van-tabbar-addBlog" @click="checkLogin('/blog/edit',2)">-->
<!--      <van-icon name="add-o" size="40" class="add-blog-btn"/>-->
<!--    </van-tabbar-item>-->
<!--    <van-tabbar-item v-if="hasMessage" icon="chat-o" name="chat" class="message"-->
<!--                     @click="checkLogin('/message',3)" dot>-->
<!--      消息-->
<!--    </van-tabbar-item>-->
<!--    <van-tabbar-item v-else icon="chat-o" name="message" class="message" @click="checkLogin('/message',3)">-->
<!--      消息-->
<!--    </van-tabbar-item>-->
<!--    <van-tabbar-item to="/user" icon="contact" name="user">我的</van-tabbar-item>-->
<!--  </van-tabbar>-->
<!--</template>-->
<!--<script setup lang="ts">-->
<!--import {Dialog, Toast} from "vant";-->
<!--import {useRouter} from "vue-router";-->
<!--import {ref} from "vue";-->
<!--import routes from "../config/route";-->
<!--import {getCurrentUser} from "../services/user.ts";-->
<!--import myAxios from "../plugins/myAxios";-->

<!--const hasMessage = ref(false)-->
<!--let router = useRouter();-->
<!--const DEFAULT_TITLE = "CAMPUS 校园伙伴"-->
<!--const title = ref(DEFAULT_TITLE)-->
<!--const active = ref(0)-->
<!--router.beforeEach(async (to) => {-->
<!--  const toPath = to.path-->
<!--  const route = routes.find((routes) => {-->
<!--    return routes.path === toPath-->
<!--  })-->
<!--  document.title = " CAMPUS 校园伙伴"-->
<!--  title.value = route?.title ?? DEFAULT_TITLE-->

<!--  // if (to.path !== '/user/login') {-->
<!--  //   let res = await myAxios.get("/message");-->
<!--  //   if (res?.data.code === 0) {-->
<!--  //     if (res.data.data) {-->
<!--  //       hasMessage.value = true-->
<!--  //     } else {-->
<!--  //       hasMessage.value = false-->
<!--  //     }-->
<!--  //   }-->
<!--  // }-->

<!--})-->
<!--const onClickLeft = () => {-->
<!--  router.back()-->
<!--};-->
<!--const onClickRight = () => {-->
<!--  router.push("/search")-->
<!--};-->

<!--const checkLogin = async (to, index) => {-->
<!--  let user = await getCurrentUser();-->
<!--  if (!user) {-->
<!--    Dialog.confirm({-->
<!--      message:-->
<!--          "该功能需要登陆后使用,是否登录",-->
<!--      confirmButtonText: "去登录"-->
<!--    })-->
<!--        .then(() => {-->

<!--          Toast.fail("未登录")-->
<!--          router.replace("/user/login")-->
<!--        })-->
<!--        .catch(() => {-->
<!--        });-->
<!--  } else {-->
<!--    await router.push(to)-->
<!--    if (active.value === 'message') {-->
<!--      let message = document.getElementsByClassName("message")-->
<!--      message.item(0).style.color = '#007eff'-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.content {-->
<!--  padding-bottom: 70px;-->
<!--}-->
<!--.add-blog-btn {-->
<!--  border-radius: 50%;-->
<!--  color: white;-->
<!--  background: linear-gradient(to right, #548be3, #0059ff, #438aa9);-->
<!--}-->

<!--</style>-->







<!--<template>-->
<!--  <van-sticky>-->
<!--    <van-nav-bar-->
<!--        :title="title"-->
<!--        left-arrow-->
<!--        @click-left="onClickLeft"-->
<!--        @click-right="onClickRight"-->
<!--        style="margin: 5px"-->
<!--    >-->
<!--      <template #right>-->
<!--        <van-icon name="search" size="18"/>-->
<!--      </template>-->
<!--    </van-nav-bar>-->
<!--  </van-sticky>-->
<!--  <div class="content">-->
<!--    <router-view/>-->
<!--  </div>-->
<!--  <van-tabbar route v-model="active">-->
<!--    <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>-->
<!--    <van-tabbar-item to="/team" icon="flag-o" name="team">队伍</van-tabbar-item>-->
<!--    <van-tabbar-item replace class="van-tabbar-addBlog" @click="checkLogin('/blog/edit',2)">-->
<!--      <van-icon name="add-o" size="40" class="add-blog-btn"/>-->
<!--    </van-tabbar-item>-->
<!--    <van-tabbar-item v-if="hasMessage" icon="chat-o" name="chat" class="message"-->
<!--                     @click="checkLogin('/message',3)" dot>-->
<!--      消息-->
<!--    </van-tabbar-item>-->
<!--    <van-tabbar-item v-else icon="chat-o" name="message" class="message" @click="checkLogin('/message',3)">-->
<!--      消息-->
<!--    </van-tabbar-item>-->
<!--    <van-tabbar-item to="/user" icon="contact" name="user">我的</van-tabbar-item>-->
<!--  </van-tabbar>-->
<!--</template>-->

<!--<script setup lang="ts">-->
<!--import {Dialog, Toast} from "vant";-->
<!--import {useRouter} from "vue-router";-->
<!--import {ref} from "vue";-->
<!--import routes from "../config/route";-->
<!--import {getCurrentUser} from "../services/user.ts";-->
<!--import myAxios from "../plugins/myAxios";-->

<!--const hasMessage = ref(false);-->
<!--let router = useRouter();-->
<!--const DEFAULT_TITLE = "CAMPUS 校园伙伴";-->
<!--const title = ref(DEFAULT_TITLE);-->
<!--const active = ref(0);-->

<!--router.beforeEach(async (to, from, next) => {-->
<!--  const toPath = to.path;-->
<!--  const route = routes.find((routes) => routes.path === toPath);-->
<!--  document.title = " CAMPUS 校园伙伴";-->
<!--  title.value = route?.title ?? DEFAULT_TITLE;-->

<!--  if (to.path !== '/user/login') {-->
<!--    try {-->
<!--      let res = await myAxios.get("/message");-->
<!--      if (res?.data.code === 0) {-->
<!--        hasMessage.value = !!res.data.data;-->
<!--      }-->
<!--    } catch (error) {-->
<!--      console.error("Failed to fetch messages:", error);-->
<!--    }-->
<!--  }-->
<!--  next(); // 确保调用 next() 继续导航-->
<!--});-->

<!--const onClickLeft = () => {-->
<!--  router.back();-->
<!--};-->

<!--const onClickRight = () => {-->
<!--  router.push("/search");-->
<!--};-->

<!--const checkLogin = async (to, index) => {-->
<!--  let user = await getCurrentUser();-->
<!--  if (!user) {-->
<!--    Dialog.confirm({-->
<!--      message: "该功能需要登陆后使用,是否登录",-->
<!--      confirmButtonText: "去登录"-->
<!--    })-->
<!--        .then(() => {-->
<!--          Toast.fail("未登录");-->
<!--          router.replace("/user/login");-->
<!--        })-->
<!--        .catch(() => {});-->
<!--  } else {-->
<!--    await router.push(to);-->
<!--    if (active.value === 'message') {-->
<!--      let message = document.getElementsByClassName("message");-->
<!--      message.item(0).style.color = '#007eff';-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.content {-->
<!--  padding-bottom: 70px;-->
<!--}-->
<!--.add-blog-btn {-->
<!--  border-radius: 50%;-->
<!--  color: white;-->
<!--  background: linear-gradient(to right, #548be3, #0059ff, #438aa9);-->
<!--}-->
<!--</style>-->












<template>
  <div v-if="!isFullScreen">
    <van-sticky>
      <van-nav-bar
          :title="title"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
          style="margin: 5px"
      >
        <template #right>
          <van-icon name="search" size="18"/>
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="content">
      <router-view/>
    </div>
    <van-tabbar route v-model="active">
      <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
      <van-tabbar-item to="/team" icon="flag-o" name="team">队伍</van-tabbar-item>
      <van-tabbar-item replace class="van-tabbar-addBlog" @click="checkLogin('/blog/edit',2)">
        <van-icon name="add-o" size="40" class="add-blog-btn"/>
      </van-tabbar-item>
      <van-tabbar-item v-if="hasMessage" icon="chat-o" name="chat" class="message"
                       @click="checkLogin('/message',3)" dot>
        消息
      </van-tabbar-item>
      <van-tabbar-item v-else icon="chat-o" name="message" class="message" @click="checkLogin('/message',3)">
        消息
      </van-tabbar-item>
      <van-tabbar-item to="/user" icon="contact" name="user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
  <div v-else>
    <router-view/>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Dialog, Toast } from "vant";
import routes from "../config/route";
import { getCurrentUser } from "../services/user.ts";
import myAxios from "../plugins/myAxios";

const hasMessage = ref(false);
let router = useRouter();
const DEFAULT_TITLE = "CAMPUS 校园伙伴";
const title = ref(DEFAULT_TITLE);
const active = ref(0);
const isFullScreen = ref(false);

router.beforeEach(async (to, from, next) => {
  const toPath = to.path;
  const route = routes.find((routes) => routes.path === toPath);
  document.title = " CAMPUS 校园伙伴";
  title.value = route?.title ?? DEFAULT_TITLE;
  isFullScreen.value = route?.meta?.fullScreen ?? false;

  if (to.path !== '/user/login') {
    try {
      let res = await myAxios.get("/message");
      if (res?.data.code === 0) {
        hasMessage.value = !!res.data.data;
      }
    } catch (error) {
      console.error("Failed to fetch messages:", error);
    }
  }
  next(); // 确保调用 next() 继续导航
});

const onClickLeft = () => {
  router.back();
};

const onClickRight = () => {
  router.push("/search");
};

const checkLogin = async (to, index) => {
  let user = await getCurrentUser();
  if (!user) {
    Dialog.confirm({
      message: "该功能需要登陆后使用,是否登录",
      confirmButtonText: "去登录"
    })
        .then(() => {
          Toast.fail("未登录");
          router.replace("/user/login");
        })
        .catch(() => {});
  } else {
    await router.push(to);
    if (active.value === 'message') {
      let message = document.getElementsByClassName("message");
      message.item(0).style.color = '#007eff';
    }
  }
};
</script>

<style scoped>
.content {
  padding-bottom: 70px;
}
.add-blog-btn {
  border-radius: 50%;
  color: white;
  background: linear-gradient(to right, #548be3, #0059ff, #438aa9);
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 使聊天容器占据整个视口高度 */
  background-color: #f5f5f5; /* 背景颜色 */
  padding: 0; /* 移除内边距 */
}

.content {
  flex: 1;
  overflow-y: auto; /* 确保聊天内容可以滚动 */
  padding: 16px;
  background-color: #f5f5f5; /* 背景色 */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  height: calc(100% - 80px); /* 减少滑动范围 */
}

.content p {
  margin: 8px 0;
  padding: 8px;
  background-color: #fff;
  border-radius: 8px;
  max-width: 70%; /* 控制消息宽度 */
  word-break: break-word;
}

.content p.user-message {
  background-color: #dcf8c6; /* 用户消息背景色 */
  align-self: flex-end; /* 用户消息靠右对齐 */
}

.input-area {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff; /* 输入框背景色 */
  z-index: 10; /* 确保输入框在最上方 */
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.van-field__control {
  padding: 8px;
  border-radius: 8px;
  background-color: #f5f5f5;
  color: #333;
  font-size: 16px;
}

.van-button--primary {
  background-color: #1989fa;
  border-color: #1989fa;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px 16px;
}
</style>













